<template>
    <ul class="todo-list">
        <ListItem v-for="(item,index) in showList" :key="item.id" :item="item" :index="index"/>
    </ul>
</template>
<script>
import { mapState } from 'vuex'
import ListItem from "./ListItem.vue"
export default {
    name:"DataList",
	components:{
		ListItem
	},
	computed:{
		...mapState(['list','status']),
		showList(){
			switch(this.status){
				case 'all':
					return this.list;
				case "active":
					return this.list.filter(item=>!item.finished)
				case "completed":
					return this.list.filter(item=>item.finished)
			}
		}
	},
	updated(){
        localStorage.setItem('list',JSON.stringify(this.list))
    }
}
</script>
<style lang="scss" scoped>
     

  
.todo-list {
	margin: 0;
	padding: 0;
	list-style: none;
    
}

</style>